<script setup lang="ts">
//@ts-nocheck

import {inject, onMounted, onUnmounted, useAttrs} from "vue";

const props = defineProps({
  name: String,
  modelValue: [String, Number],
})

const emit = defineEmits(['update:modelValue', 'change'])

const attrs = useAttrs();


let {push_item, change_item, delete_item} = inject('test-provide', {})


let item_index = undefined;

function change(evt){
  update_value(evt.target.value);
  // setTimeout(()=>{
  //   change_item(item_index, 'modelValue', props.modelValue);
  // },10)
}
function update_value(val){
  emit('update:modelValue', val);
  console.log(props.modelValue)
  return props.modelValue;
}

onMounted(()=>{
  item_index = push_item({props, update_value});
  console.log(item_index)
})

onUnmounted(()=>{
  delete_item(item_index);
})

</script>

<template>
  <input type="text" :value="modelValue" @change="change">
</template>

<style scoped>

</style>